﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>CMS Enveloped With Pre-Defined Data Example</title>

    <script type="application/javascript" src="../../node_modules/babel-polyfill/dist/polyfill.js"></script>
    <script type="text/javascript" src="bundle.js"></script>

    <style type="text/css">
        body{background:#EFEFEF;font:normal 14px/16px Helvetica, Arial, sans-serif;}
        .wrapper{
            width:600px;
            margin:50px auto;
            padding:50px;
            border:solid 2px #CCC;
            border-radius:10px;
            -webkit-border-radius:10px;
            box-shadow:0 0 12px 3px #CDCDCD;
            -webkit-box-shadow:0 0 12px 3px #CDCDCD;
            background:#FFF;
        }
        label{
            font:bold 16px/20px Helvetica, Arial, sans-serif;
            margin:0 0 8px;
        }
        textarea{
            width:500px;
            border:solid 1px #999;
            border-radius:5px;
            -webkit-border-radius:5px;
            height:340px;
            font:normal 12px/15px monospace;
            display:block;
            margin:0 0 12px;
            box-shadow:0 0 5px 5px #EFEFEF inset;
            -webkit-box-shadow:0 0 5px 5px #EFEFEF inset;
            padding:20px;
           resize: none;
        }
        a{
            display:inline-block;
            padding:5px 15px;
            background:#ACD0EC;
            border:solid 1px #4C6181;
            color:#000;
            font:normal 14px/16px Helvetica, Arial, sans-serif;
        }
        a:hover{
            background:#DAEBF8;
            cursor:pointer;
        }
        .header-block {
            margin-top:30px;
            font:bold 16px/20px Helvetica, Arial, sans-serif;
        }
        .border-block{
            border:solid 2px #999;
            border-radius:5px;
            -webkit-border-radius:5px;
            margin:10px 0 0;
            padding:20px 30px;
            background:#F0F4FF;
        }
        .border-block h2{
            margin:0 0 16px;
            font:bold 22px/24px Helvetica, Arial, sans-serif;
        }
        .border-block p{
            margin:0 0 12px;
        }
        .border-block p .type{
            font-weight:bold;
            display:inline-block;
            width:176px;
        }
        .border-block .two-col{
            overflow:hidden;
            margin:0 0 16px;
        }
        .border-block .two-col .subject{
            width:180px;
            font-weight:bold;
            margin:0 0 12px;
            float:left;
        }
        .border-block .two-col #cert-attributes{
            margin:0;
            padding:0;
            float:left;
            list-style:none;
        }
        .border-block .two-col #cert-attributes li p{
            margin:0;
        }
        .border-block .two-col #cert-attributes li p span{
            width:40px;
            display:inline-block;
            margin:0 0 5px;
        }
        .border-block .two-col #cert-exten{
            overflow:hidden;
            padding:0 0 0 17px;
            margin:0;
            list-style-type:square;
        }
        table {
            border:solid;
            border-collapse:collapse;
            border-color:black;
        }
       th { 
        text-align:center;
        background: #ccc;
        padding: 5px;
        border: 1px solid black;
       }
       td { 
        padding: 5px;
        border: 1px solid black; 
       }
    </style>
</head>

<body>
    <div class="wrapper">
        <p class="header-block">Work with CMS Enveloped data</p>
        <div class="border-block">
            <label for="content" style="font-weight:bold;float:left;">Content to encrypt:</label>
            <textarea id="content">&lt; Put input data here &gt;</textarea>
            <label for="password" style="font-weight:bold;float:left;">Password (pre-defined data):</label>
            <textarea id="password">&lt; Put password here &gt;</textarea>
            <p>
                <label for="content_enc_alg" style="font-weight:bold">Content encryption algorithm:</label>
                <select id="content_enc_alg" onchange="handleContentEncAlgOnChange()">
                    <option value="alg_CBC">AES-CBC</option>
                    <option value="alg_GCM">AES-GCM</option>
                </select>
            </p>
            <p>
                <label for="content_enc_alg_len" style="font-weight:bold">Content encryption algorithm length:</label>
                <select id="content_enc_alg_len" onchange="handleContentEncLenOnChange()">
                    <option value="len_128">128</option>
                    <!-- Currently in Google Chrome AES 192 bit keys are not supported
                    <option value="len_192">192</option>
                    -->
                    <option value="len_256">256</option>
                </select>
            </p>
            <p>
                <label for="content_type" style="font-weight:bold">Type of content encryption:</label>
                <select id="content_type" onchange="handleContentTypeOnChange()">
                    <option value="type_pass">Password-based encryption</option>
                    <option value="type_kek">Pre-defined KEK</option>
                </select>
            </p>
            <p>
                <a onclick="envelopedEncrypt();">Encrypt</a>
            </p>
            <label for="encrypted_content" style="font-weight:bold;float:left;">BASE-64 encoded encrypted content:</label>
            <textarea id="encrypted_content">&lt; Put encrypted content here &gt;</textarea>
            <p>
                <a onclick="envelopedDecrypt();">Decrypt</a>
            </p>
            <label for="decrypted_content" style="font-weight:bold;float:left;">Decrypted content:</label>
            <textarea id="decrypted_content">&lt; Decrypted content will be put here &gt;</textarea>
        </div>
    </div>
</body>
</html>